<template>
  <div v-if="length == 0" class="flex-center">
    <img src="/public/null.png" class="png" />
  </div>
  <a-comment v-else v-for="mess in commentList" :key="mess.m_id" class="comment">
    <template #actions>
      <span key="comment-nested-reply-to">{{ mess.m_date }}</span>
    </template>
    <template #avatar>
      <a-avatar
        v-if="mess.u_avatar"
        :src="'/api/avatar/' + mess.u_avatar"
        style="vertical-align: middle"
      />
      <a-avatar
        v-else
        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
      />
    </template>
    <template #content>
      <p>
        <a :href="'/user/information?u_id='+mess.u_id">{{ mess.u_name }}</a> 评论了你的文章 
        <a :href="'/user/articledetail?a_id='+mess.a_id">{{ mess.a_title }}</a>
        <a-badge v-if="mess.ifChecked == 0" count="1" class = "unread"/>
      </p>
      <p>
        <b>{{ mess.c_detail }}</b>
      </p>
    </template>
  </a-comment>
</template>

<script>
import { ref, defineComponent, reactive } from "vue";
import { get, post, tip } from "@/common";

const commentList = ref({});
const length = ref(0);

const getCommentList = () => {
  get("/message/getCommentList")
    .then((res) => {
      console.log(res.data);
      commentList.value = res.data;
      length.value = res.data.length; 
      post("/message/clear/3/7");
    });
};
export default defineComponent({
  setup(props, { emit }) {
    getCommentList();
    emit("select", "comment");
    return {
      commentList,
      length,
    };
  },
});

</script>
<style scoped>
.comment {
  margin-left: 1cm;
}
.unread{
  float: right;
  margin-right: 20px;
}
.png{
  margin-top: 40px;
  margin-bottom: 40px;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>